<template>
	<div>
		<div class="my-detail">
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item v-for="(item,i) in product.picList" :key="i">
					<van-image :src="APIDomainName + item.md" /></van-swipe-item>
			</van-swipe>
			<van-cell title="商品编号" :value="product.id" />
			<van-cell title="商品名称" :value="product.name" />
			<van-cell title="商品标题" :value="product.title" />
			<van-cell title="商品规格" :value="product.spec" />
			<van-cell title="硬盘" :value="product.disk" />
			<van-cell title="CPU" :value="product.cpu" />
			<van-cell title="内存" :value="product.memory" />
			<van-cell title="显卡" :value="product.video_card" />
			<van-cell title="分辨率" :value="product.resolution" />
			<van-cell title="上架时间" :value="product.shelf_time" />
			<van-cell title="单价" :value="product.price" />
 
			<!-- 商品购买区域 -->
			<van-cell>
				<template #default>
					<div class="count-buy">
						<div>购买数量</div>
						<van-stepper v-model="count" integer />
						<van-button type="primary" size="small" @click="onClickAddShopcart">加入购物车
						</van-button>
					</div>
				</template>
			</van-cell>
 
			<van-button type="primary" size="large" @click="$router.back()">返回</van-button>
		</div>
	</div>
</template>
 
<script>
	import { getProductDetailByIdAPI } from "@/api/product.js";
	import dayjs from 'dayjs' // 日期处理模块
	import { addCartAPI } from "@/api/cart.js";
	import { showToast } from 'vant'
	export default {
		data() {
			return {
				product: {},
			}
		},
		//DOM加载后获取后端数据
		mounted() {
			this.loadData();
		},
		methods: {
			loadData() {
				const id = this.$route.query.id // 注意路由传参的方式
				// 调用接口
				getProductDetailByIdAPI(id).then(result => {
					this.product = result.data;
					// 日期格式转换
					this.product.shelf_time = dayjs(this.product.shelf_time).format('YYYY-MM-DD HH:mm:ss');
				})
			},
			//处理添加购物车
			onClickAddShopcart() {
				// 接口参数，参见接口文档
				let params = {
					product_id: this.product.id,
					count: this.count,
				};
				//2.使用封装后的接口,注意：接口有参数
				addCartAPI(params).then(result => {
					showToast(result.msg);
				}).catch(() => {});
			},
		}
	}
</script>
